
import { Card, Space, Table, Tag, Tooltip } from 'antd';
import { dictionary } from '@/capabilityHooks';
import styles from './index.module.less';
import { CapabilityButton } from '@/components/capability';
import { useViewCodeCapability, useAddCapability } from './capabilityHooks';
import React from 'react';

/** 能力管理器 */
export default function CapabilityManage() {

    const dataSource = React.useMemo(() => {
        return Array.from(dictionary.values())
            .filter(e => !e.private)
    }, [])

    return (
        <div className={styles.capabilityManage}>
            <Card className={styles.card} size='small'>
                能力：能力是一个功能的抽象，如：增删改查、导入导出、权限管理等
            </Card>

            <Card className={styles.card} size='small'>
                <Space style={{ width: '100%', justifyContent: 'end' }} >
                    <CapabilityButton type='primary' useCapability={useAddCapability} />
                </Space>
            </Card>

            <Table
                dataSource={dataSource}
                columns={[
                    {
                        title: 'ID',
                        dataIndex: 'id',
                        width: 200,
                    },
                    {
                        title: '名称',
                        dataIndex: 'title',
                        width: 200,
                    },
                    {
                        title: '是否弃用',
                        dataIndex: 'deprecated',
                        width: 70,
                        render: e => e
                            ? <Tooltip title={e} ><Tag color='red'>是</Tag></Tooltip>
                            : <Tag color='green'>否</Tag>
                    },
                    {
                        title: '标签',
                        dataIndex: 'tag', render: e => (e || '').split(',').map(e => <Tag>{e}</Tag>),
                        width: 200,
                    },
                    {
                        title: '描述',
                        dataIndex: 'description'
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        align: 'right',
                        width: 70,
                        render: (_, record) => (
                            <Space className={styles.operation} >
                                <CapabilityButton type='link' record={record} useCapability={useViewCodeCapability} />
                            </Space>
                        )
                    }
                ]}
            />
        </div>
    )
}